<template>
  <div class="shopping-details">
    <div class="details-body">
      <ul class="details-body__left">
        <div class="wrapperLeft" ref="wrapperLeft">
          <div>
            <li @click="thisColor(index, item)" :class="{ activeColor: index === value }" v-for="(item, index) in Details" :key="index">{{item.name}}</li>
          </div>
        </div>
      </ul>
      <div class="details-body__right">
        <div class="details-right__title">
          {{title}}
        </div>
        <div class="shopping-item" ref="wrapper">
          <div>
            <div class="shopping-item__for" v-for="(item, index) in DetailsItem" :key="index">
              <div class="shopping-item__img">
                <img :src="imgShopUrl+item.image_path" alt="">
              </div>
              <div class="shopping-item__font">
                <p>{{item.name}}</p>
                <p>{{item.description}}</p>
                <p>{{item.tips}}</p>
                <p>7.1折</p>
                <p>￥22.8<span>￥32</span></p>
                <div class="shopping__count" style="display: none;">
                  <div class="shopping-min" @click="Min(item, index)">-</div>
                  <input required type="text" v-model="inpCount">
                </div>
                <div class="shopping-create" @click="Max(item, index)">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-footer">
      <div class="footer__left">
        <div class="left__box">
          <img src="../assets/购物车.png" alt="">
        </div>
        <div class="left__content" @click="show = true">
          <p>未选购商品</p>
          <p>另需配送费0.6元</p>
        </div>
      </div>
      <div class="footer__right">￥20元起送</div>
    </div>
    <van-action-sheet style="border-radius: 0px;" v-model="show" title="已优惠">
      <div class="action-sheet">
        <div class="shopping-item__for" v-for="(item, index) in DetailsItem" :key="index">
          <div class="shopping-item__img">
            <img :src="imgShopUrl+item.image_path" alt="">
          </div>
          <div class="shopping-item__font">
            <p>{{item.name}}</p>
            <p>{{item.description}}</p>
            <p>{{item.tips}}</p>
            <p>7.1折</p>
            <p>￥22.8<span>￥32</span></p>
            <div class="shopping__count" style="display: none;">
              <div class="shopping-min" @click="Min(item, index)">-</div>
              <input required type="text" v-model="inpCount">
            </div>
            <div class="shopping-create" @click="Max(item, index)">+</div>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {createToast} from './simpleComponents/co-toast'

export default {
  name: 'ShoppingDetails',
  data () {
    return {
      show: false,
      inpCount: 0,
      imgShopUrl: 'https://elm.cangdu.org/img/',
      // 所有数据
      Details: [],
      // 选项卡下标
      value: 0,
      // 选项卡标题
      DetailsTitle: [],
      title: '',
      // 每条商品信息
      DetailsItem: [],
      id: this.$route.query.ShopId
    }
  },
  created () {
    this.$http.ShoppingDetails({
      restaurant_id: this.id
    }).then(res => {
      res.data.forEach((item) => {
        // 获取商品标题
        this.DetailsTitle.push(item.name)
      })
      // 获取全部商品以及左边列表
      this.Details = res.data
      // 给商品标题赋值
      this.title = this.DetailsTitle[0]
      window.console.log(this.Details[0].foods)
      // 取每条商品信息
      this.DetailsItem = this.Details[0].foods
    }).catch(err => {
      window.console.log(err)
    })
  },
  methods: {
    thisColor (index, item) {
      this.title = item.name
      this.value = index
      this.DetailsItem = this.Details[index].foods
    },
    Max (item, index) {
      let count = this.$el.querySelectorAll(".shopping__count")
      for (let i = 0; i < count.length; i++) {
        if(index == i) {
          if(count[i].style.display == "none") {
            count[i].style.display = "block";
          }
        } else if(count[i].style.display == "block")  {
          count[i].style.display = "none";
        }
      }
      this.inpCount++
    },
    Min (item, index) {
      if (this.inpCount <= 1) {
        let count = this.$el.querySelectorAll(".shopping__count")
        for (let i = 0; i < count.length; i++) {
          if(index == i) {
            if(count[i].style.display == "block") {
              count[i].style.display = "none";
            }
          }
        }
      } else {
        this.inpCount--
      }
    }
  },
  mounted () {
    this.scroller = new BScroll(this.$refs.wrapperLeft, {
      scrollY: true,
      click: true,
      // 下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: 0
      },
      // 上拉加载
      pullUpLoad: {
        threshold: 50
      }
    })
    this.scroller = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true,
      // 下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: 0
      },
      // 上拉加载
      pullUpLoad: {
        threshold: 50
      }
    })
    this.scroller.on('pullingDown', () => {
      window.console.log('现在我们就要去取数据了')
    })
    this.scroller.on('pullingUp', () => {
      window.console.log('去后台取数据')
    })
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
    list-style: none;
  }
  .shopping-details{
    /* width: 100%;
    height: 1334px; */
    background-color: #fff;
    .details-body{
      /* width: 100%;
      height: 685px; */
      display: flex;
      justify-content: space-between;
      .details-body__left{
        width: 20%;
        height: 1000px;
        overflow: hidden;
        .wrapperLeft{
          width: 100%;
          height: 685px;
          li{
            width: 100%;
            height: 96px;
            line-height: 96px;
            text-align: center;
            font-size: 25px;
            background-color: #f8f8f8;
          }
          .activeColor{
            background-color: #fff;
            border-left: 2px solid #2295ff;
          }
        }
      }
      .details-body__right{
        width: 75%;
        height: 685px;
        .details-right__title{
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 25px;
          color: #666;
        }
        .shopping-item{
          width: 100%;
          height: 950px;
          overflow: hidden;
          .shopping-item__for{
            width: 100%;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .shopping-item__img{
              width: 30%;
              height: 190px;
              img{
                width: 100%;
              }
            }
            .shopping-item__font{
              width: 65%;
              height: 190px;
              position: relative;
              p:nth-child(1){
                font-size: 31px;
                color: #333;
                margin-bottom: 5px;
              }
              p:nth-child(2),p:nth-child(3){
                font-size: 22px;
                color: #999;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
                margin-bottom: 5px;
              }
              p:nth-child(4){
                margin-bottom: 5px;
                padding: 3px 6px;
                font-size: 20px;
                border: 1px solid #ea6551;
                color: #ea6551;
                border-radius: 3px;
                display: inline-block;
              }
              p:nth-child(5){
                width: 100px;
                font-size: 25px;
                color: #ff5399;
                margin-bottom: 5px;
                span{
                  color: #999;
                  font-size: 21px;
                  text-decoration: line-through;
                }
              }
              .shopping__count{
                width: 115px;
                height: 45px;
                position: absolute;
                right: 90px;
                bottom: 0px;
                .shopping-min{
                  width: 40px;
                  height: 40px;
                  display: inline-block;
                  line-height: 35px;
                  text-align: center;
                  border-radius: 50%;
                  color: #2295ff;
                  font-size: 30px;
                  border: 1px solid #2295ff;
                }
                input{
                  width: 60px;
                  height: 45px;
                  outline: none;
                  border: none;
                  text-align: center;
                }
              }
              .shopping-create{
                width: 45px;
                height: 45px;
                line-height: 40px;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                font-size: 30px;
                background-color: #2295ff;
                position: absolute;
                bottom: 0px;
                right: 35px;
              }
            }
          }
        }
      }
    }
    .details-footer{
      width: 100%;
      height: 96px;
      position: fixed;
      bottom: 0px;
      display: flex;
      align-items: center;
      .footer__right{
        width: 210px;
        height: 96px;
        line-height: 96px;
        text-align: center;
        color: #fff;
        font-size: 28px;
        background-color: #535356;
      }
      .footer__left{
        width: 540px;
        height: 96px;
        background-color: #505052;
        display: flex;
        justify-content: space-between;
        .left__box{
          position: relative;
          left: 24px;
          bottom: 15px;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          background-color: #363636;
          border: 10px solid #444;
          border-radius: 50%;
          img{
            width: 45px;
            opacity: .6;
            vertical-align: middle;
          }
        }
        .left__content{
          width: 390px;
          height: 96px;
          p:nth-child(1){
            font-size: 27px;
            color: #999;
            margin-top: 26px;
          }
          p:nth-child(2){
            font-size: 19px;
            color: #999;
          }
        }
      }
    }
    .action-sheet{
      width: 85%;
      height: 430;
      padding: 16px 16px 400px;
      margin: 0px auto;
      .shopping-item__for{
        width: 100%;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .shopping-item__img{
          width: 30%;
          height: 190px;
          img{
            width: 100%;
          }
        }
        .shopping-item__font{
          width: 65%;
          height: 190px;
          position: relative;
          p:nth-child(1){
            font-size: 31px;
            color: #333;
            margin-bottom: 5px;
          }
          p:nth-child(2),p:nth-child(3){
            font-size: 22px;
            color: #999;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            margin-bottom: 5px;
          }
          p:nth-child(4){
            margin-bottom: 5px;
            padding: 3px 6px;
            font-size: 20px;
            border: 1px solid #ea6551;
            color: #ea6551;
            border-radius: 3px;
            display: inline-block;
          }
          p:nth-child(5){
            width: 100px;
            font-size: 25px;
            color: #ff5399;
            margin-bottom: 5px;
            span{
              color: #999;
              font-size: 21px;
              text-decoration: line-through;
            }
          }
          .shopping__count{
            width: 115px;
            height: 45px;
            position: absolute;
            right: 90px;
            bottom: 0px;
            .shopping-min{
              width: 40px;
              height: 40px;
              display: inline-block;
              line-height: 35px;
              text-align: center;
              border-radius: 50%;
              color: #2295ff;
              font-size: 30px;
              border: 1px solid #2295ff;
            }
            input{
              width: 60px;
              height: 45px;
              outline: none;
              border: none;
              text-align: center;
            }
          }
          .shopping-create{
            width: 45px;
            height: 45px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            font-size: 30px;
            background-color: #2295ff;
            position: absolute;
            bottom: 0px;
            right: 35px;
          }
        }
      }
    }
  }
</style>
